<template>
    <!-- 可以输入文本的弹窗 -->
    <div>
        <Dialog :show="dialogConfig.show" :title="dialogConfig.title" :buttons="dialogConfig.buttons" width="400px"
            :showCancel="false" @close="dialogConfig.show = false">
            <el-form :model="formData" :rules="rules" ref="formDataRef" @submit.prevent>
                <!--textarea输入-->
                <el-form-item label="" prop="">
                    <el-input clearable placeholder="请输入申请信息" type="textarea" :rows="5" :maxlength="100" resize="none"
                        show-word-limit v-model.trim="formData.applyInfo">
                    </el-input>
                </el-form-item>
            </el-form>
        </Dialog>
    </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick } from "vue"
const { proxy } = getCurrentInstance();

const formData = ref({});
const formDataRef = ref();
const rules = {
    title: [{ required: true, message: "请输入内容" }],
};

const dialogConfig = reactive({
    show: false,
    title: "提交申请",
    buttons: [
        {
            text: "取消",
            click: () => {
                dialogConfig.show = false;
            },
        },
        {
            text: "确定",
            type: "primary",
            click: async () => {
                submitApply()
            },
        },
    ],
});

import { useContactStateStore } from "@/stores/ContactStateStore";
const contactStateStore = useContactStateStore();

const submitApply = async () => {
    // 提交申请
    const { contactId, applyInfo, contactType } = formData.value;
    let result = await proxy.Request({
        method: "post",
        url: proxy.Api.applyAdd,
        params: {
            contactId,
            applyInfo
        }
    })
    if (!result) {
        return;
    }
    // 关闭弹窗
    dialogConfig.show = false;
    // 后端返回的是添加类型，JOIN_DIRECTLY可以直接添加，JOIN_WITH_CONFIRMATION要同意后才能添加
    if (result.data == 'JOIN_DIRECTLY') {
        // 直接显示添加成功
        proxy.Message.success("添加成功");
        contactStateStore.setContactReload(null)  // 置空防止原本状态和要修改的状态相同导致不刷新列表数据
        contactStateStore.setContactReload(contactType)
    }
    else {
        // 提示申请成功
        proxy.Message.success("申请成功，等待对方同意");
    }
    // 告诉父组件请求发送完成，让父组件清空搜索内容等
    emit("reload");
}

import { useUserInfoStore } from "@/stores/UserInfoStore";
const userInfoStore = useUserInfoStore();

// 子组件提交好了之后触发父组件的事件，清空搜索内容
const emit = defineEmits(["reload"]);

const show = (data) => {
    dialogConfig.show = true;
    nextTick(() => {
        // 重置表单
        formDataRef.value.resetFields();
        // 将传入的信息赋值给表单（其实只要了contactId和applyInfo）
        formData.value = Object.assign({}, data);  // 浅拷贝
        // 设置默认申请信息
        if (data.contactType == 'USER' || data.contactType == 0) {
            formData.value.applyInfo = "我是" + userInfoStore.getUserInfo().nickName + "，申请添加你为好友";
        }
        else {
            formData.value.applyInfo = "我是" + userInfoStore.getUserInfo().nickName + "，申请加入群聊";
        }
    });
};

defineExpose({
    show,
})
</script>

<style lang="scss" scoped></style>
